---
title: ページ
description: Astroページの紹介
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

**ページ**は、Astroプロジェクトの`src/pages/`サブディレクトリにあるファイルです。Webサイトの各ページのルーティングやデータ読み込み、全体的なページレイアウトを処理する役割を担っています。

## サポートしているページファイル

Astroは`src/pages/`ディレクトリで次のファイルタイプをサポートしています。

- [`.astro`](#astroページ)
- [`.md`](#markdownmdxページ)
- `.mdx`（[MDXインテグレーションがインストール](/ja/guides/integrations-guide/mdx/#インストール)されている場合）
- [`.html`](#htmlページ)
- [`.js`/`.ts`]（[エンドポイント](/ja/guides/endpoints/)として）

## ファイルベースルーティング

Astroは、**ファイルベースルーティング**と呼ばれるルーティング手法を採用しています。 `src/pages/`ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。

また、[動的ルーティング](/ja/guides/routing/#dynamic-routes)を使用して、1つのファイルから複数のページを生成できます。これにより、[コンテンツコレクション](/ja/guides/content-collections/)や[CMS](/ja/guides/cms/)など、特別な`/pages/`ディレクトリの外にコンテンツがあっても、ページを作成できます。

<ReadMore>[Astroのルーティング](/ja/guides/routing/)について詳しくみる。</ReadMore>

### ページ間のリンク

サイト内の別のページへリンクを張るには、HTML標準の[`<a>`要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)をコンポーネントテンプレートに記述してください。相対パスではなく、**ルートドメインへの URL 相対パス**をリンクとして使用してください。

例: `example.com`のいずれかのページから`https://example.com/authors/sonali/`にリンクする。

```astro title="src/pages/index.astro"
Read more <a href="/authors/sonali/">about Sonali</a>.
```

## Astroページ

Astroページは`.astro`拡張子を使い[Astroコンポーネント](/ja/basics/astro-components/)と同じ機能を持ちます。

```astro title="src/pages/index.astro"
---
---
<html lang="ja">
  <head>
    <title>ホームページ</title>
  </head>
  <body>
    <h1>私のホームページへようこそ！</h1>
  </body>
</html>
```

ページは完全なHTMLを出力する必要があります。明示的に含まれていない場合、Astroはデフォルトで必要な`<!DOCTYPE html>`宣言と`<head>`コンテンツを`src/pages/`内にある`.astro`コンポーネントに追加します。コンポーネントを[パーシャルページ](#パーシャルページ)としてマークすることで、コンポーネントごとにこの動作をオプトアウトできます。

すべてのページで同じHTML要素を繰り返すことを避けるために、共通の`<head>`と`<body>`要素を独自の[レイアウトコンポーネント](/ja/basics/layouts/)に移動できます。レイアウトコンポーネントはいくつでも使えます。

```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたコンテンツ！</p>
</MySiteLayout>
```

<ReadMore>Astroの[レイアウトコンポーネント](/ja/basics/layouts/)について詳しくみる。</ReadMore>

## Markdown/MDXページ

Astroは`/src/pages/`にあるMarkdown (`.md`) ファイルも、最終的なWebサイトのページとして扱います。もし[MDXインテグレーションがインストールされている](/ja/guides/integrations-guide/mdx/#インストール)場合、MDX(`.mdx`)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。

:::tip
ブログ記事や商品アイテムなど、同じ構造を持つMarkdownファイルのディレクトリには、ページではなく[コンテンツコレクション](/ja/guides/content-collections/)の作成を検討してください。
:::

ページレイアウトは[Markdownファイル](#markdownmdxページ)に対して特に有効です。Markdownファイルは特別な `layout`というフロントマターのプロパティを使用して、Markdownコンテンツを`<html>...</html>`ページドキュメントにラップする [レイアウトコンポーネント](/ja/basics/layouts/)を指定できます。

```md {3}
---
# 例: src/pages/page.md
layout: ../layouts/MySiteLayout.astro
title: Markdownページ
---
# タイトル

これは**Markdown**で書かれたページです。
```

<ReadMore>Astroの[Markdown](/ja/guides/markdown-content/)について詳しくみる。</ReadMore>

## HTMLページ

`.html`拡張子のついたファイルを`src/pages`内に置くことができ、直接サイトのページとして使用されます。[HTMLコンポーネント](/ja/basics/astro-components/#htmlコンポーネント)ではAstroの主要機能の一部がサポートされていないことに注意してください。

## カスタム404エラーページ

カスタムの404エラーページを作成するには、`src/pages`に`404.astro`または`404.md`ファイルを作成します。

これは`404.html`ページにビルドされます。ほとんどの[デプロイサービス](/ja/guides/deploy/)はこのファイルを見つけて使用します。

## カスタム500エラーページ

[オンデマンドレンダリング](/ja/guides/on-demand-rendering/)されたページのカスタムの500エラーページを作成するには、`src/pages/500.astro`を作成します。このカスタムページは事前レンダリングされたページでは使用されず、事前レンダリングされません。

このページをレンダリングする際にエラーが発生した場合は、[デプロイサービス](/ja/guides/deploy/)のデフォルトの500エラーページが表示されます。

<p><Since v="4.10.3" /></p>

開発サーバーの起動中にエラーが発生した場合は、エラーオーバレイではなくターミナル上にエラーが表示されます。

### `error`

<p><Since v="4.11.0" /></p>

`src/pages/500.astro`は特別なページで、レンダリング中に発生したエラーが自動的に`error`propとして渡されます。`error`propにより、エラーの詳細(例: ページからのエラー、ミドルウェアからのエラー)を表示することができるようになります。

`error`propの型は何でも構いませんが、コード内での型指定や使用方法に影響を与える可能性があります。

```astro title="src/pages/500.astro"
---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---

<div>{error instanceof Error ? error.message : "Unknown error"}</div>
```

`error`propから機密情報を漏洩させないため、まずエラーを評価し、適切な内容を返すことを検討してください。例えば、エラーのスタックは表示すべきでありません。スタックにはサーバー上のコード構造に関する情報が含まれているためです。

## パーシャルページ

<p><Since v="3.4.0" /></p>

:::caution
パーシャルページは、[htmx](https://htmx.org/)や[Unpoly](https://unpoly.com/)などのフロントエンドライブラリと組み合わせて使用​​することを目的としています。低レベルのフロントエンドJavaScriptの記述に慣れている場合は、これらを使用することもできます。このため、これらは高度な機能です。

さらに、コンポーネントにスコープされたスタイルまたはスクリプトが含まれている場合は、これらの要素がHTML出力から削除されるため、パーシャルを使用すべきではありません。スコープ付きスタイルが必要な場合は、パーシャルではない通常のページと一緒にコンテンツをheadにマージできるフロントエンドライブラリを使用することをお勧めします。
:::

パーシャルは`src/pages/`内にあるページコンポーネントであり、完全なページとしてレンダリングすることを目的としていません。

このフォルダーの外にあるコンポーネントと同様、これらのファイルには、`<!DOCTYPE html>`宣言や、スコープ指定されたスタイルやスクリプトなどの`<head>`コンテンツは自動的に含まれません。

ただし、これらは特別な`src/pages/`ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例：[htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)など)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。

パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するための[アイランド](/ja/concepts/islands/)や[`<script>` タグ](/ja/guides/client-side-scripts/)の代替手段が提供されます。

値をエクスポートできるページファイル(例`.astro`、`.mdx`)は、パーシャルファイルとしてマークできます。

次のエクスポートを追加して、`src/pages/`内のファイルをパーシャルファイルとして構成します。

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---
<li>パーシャルファイルです!</li>
```

`export const partial`は静的に識別可能である必要があります。次の値を取ることができます。

- 真偽値 __`true`__
- `import.meta.env.USE_PARTIALS`などのimport.meta.envを使用した環境変数

### ライブラリと併用する

パーシャルは、[htmx](https://htmx.org/)などのライブラリを使用したページのセクションを動的に更新するために使用されます。

次の例は、`hx-post`属性にパーシャルのURLが設定された例を示しています。パーシャルページのコンテンツは、このページ上のターゲットのHTML要素を更新するために使用されます。

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>マイページ</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">ターゲット</div>
    
      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        ここをクリック！
      </button>
    </section>
  </body>
</html>
```

`.astro`のパーシャルは対応するファイルパスに存在する必要があり、パーシャルページとして定義するエクスポートが含まれている必要があります。

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>クリックされました!</div>
```

htmxの使用方法の詳細については、[htmxのドキュメント](https://htmx.org/docs/)を参照してください。
